<template>
  <div name="order" class="full-height">
    <ModifyOrder ref="newOrder" @refresh="getOrder(true)"/>
    <ModifyOrder ref="modifyOrder" @refresh="getOrder(true)" modify/>
    <q-table
        title="运输订单列表"
        class="no-border-radius sticky-header-table full-height"
        :rows="orderList"
        :columns="columns"
        :pagination="{ rowsPerPage: 100 }"
        :visible-columns="visibleColumns"
    >
      <template v-slot:top-right>
        <div class="flex q-gutter-x-sm items-center">
          <q-select clearable style="min-width: 10rem" label="订单状态"
                    @popup-hide="getOrder(true)" @clear="getOrder(true)"
                    outlined dense v-model="param.status" :options="options"/>
          <q-btn label="新增订单" icon="add" color="primary"
                 @click="newOrder.show()"/>
        </div>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props" @click="modifyOrder.show(props.row)">
          <q-td v-for="item in columns" v-bind:key="item.name" :props="props"
                class="text-center">
            <span v-if="item.name === 'specs'">
              <span v-if="props.row.receiver!==null">
                  {{ props.row.receiver.specs }}
              </span>
            </span>
            <span v-else-if="item.name === 'count'">
              <span v-if="props.row.receiver!==null">
                  {{ props.row.receiver.count }}
              </span>
            </span>
            <span v-else>
                {{ props.row[item.name] }}
            </span>
          </q-td>
        </q-tr>
      </template>
      <template v-slot:bottom>
        <div class="full-width flex justify-end">
          <q-pagination
              v-model="param.page"
              :max="page"
              input
          />
        </div>
      </template>
    </q-table>
  </div>
</template>

<script setup>
import { api } from 'boot/axios'
import { useAPIStore } from 'stores/api'
import { onUnmounted, ref, watch } from 'vue'
import ModifyOrder from 'components/transport/orders/ModifyOrder.vue'
import { status } from 'src/utils/deviceWs'

let timer
const modifyOrder = ref() // 修改弹窗
const newOrder = ref() // 新增弹窗
// 订单列
const columns = [
  {
    label: '优先度',
    name: 'priority',
    field: 'priority',
    sortable: true,
    align: 'center'
  },
  {
    label: '订单状态',
    name: 'status',
    field: 'status',
    sortable: true,
    align: 'center'
  },
  {
    label: '设备类型',
    name: 'type',
    field: 'type',
    align: 'center'
  },
  {
    label: '设备型号',
    name: 'model',
    field: 'model',
    align: 'center'
  },
  {
    label: '执行设备',
    name: 'deviceID',
    field: 'deviceID',
    align: 'center'
  },
  {
    label: '货物规格',
    name: 'specs',
    field: 'specs',
    align: 'center'
  },
  {
    label: '货物数量',
    name: 'count',
    field: 'count',
    align: 'center'
  },
  {
    label: '开始时间',
    name: 'startTime',
    field: 'startTime',
    sortable: true,
    align: 'center'
  },
  {
    label: '取货时间',
    name: 'pickTime',
    field: 'pickTime',
    align: 'center'
  },
  {
    label: '到达时间',
    name: 'arriveTime',
    field: 'arriveTime',
    align: 'center'
  }
]
// 订单状态
const options = [
  '未分配',
  '未开始',
  '待取件',
  '取件中',
  '配送中',
  '已签收',
  '已完成'
]
// 可见列
const visibleColumns = ref(['priority', 'startTime', 'pickTime', 'arriveTime', 'status', 'type', 'model', 'deviceID'])

const param = ref({
  page: 1,
  status: null
})
const page = ref(1) // 总页数
const orderList = ref([]) // 订单列表数数据

onUnmounted(() => {
  if (timer) clearTimeout(timer)
})

watch(() => status.value.model, value => {
  if (status.value.model && status.value.model.includes('运城堵头')) {
    visibleColumns.value = ['priority', 'specs', 'count', 'startTime', 'pickTime', 'arriveTime', 'status']
  } else {
    visibleColumns.value = ['priority', 'startTime', 'pickTime', 'arriveTime', 'status', 'type', 'model', 'deviceID']
  }
})

/**
 * 获取订单数据与分页大小，当2个接口同时请求成功才处理
 * @param isRefresh
 * 控制是否是新增订单后刷新调用接口而不是轮询调用接口，如果是刷新，需要清除掉timer，不然会造成同时有多个timer，同时调用多次
 */
function getOrder (isRefresh) {
  if (isRefresh) {
    if (timer) clearTimeout(timer)
  }
  Promise.all([
    api.get(useAPIStore().orderUrl + 'order/all', { params: param.value }),
    api.get(useAPIStore().orderUrl + 'order/all/page', { params: param.value })
  ]).then(res => {
    orderList.value = res[0].data
    page.value = res[1].data
  }).finally(() => {
    timer = setTimeout(getOrder, 1000)
  })
}

getOrder(false)

</script>
